<template>
  <el-card class="main-nav">
    <h1>卡牌交易系统功能导航</h1>
    <el-row :gutter="16">
      <el-col :span="12" v-for="f in features" :key="f.path">
        <el-button type="primary" class="nav-btn" @click="$router.push(f.path)" round block>
          {{ f.name }}
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
const features = [
  { name: '登录/注册', path: '/login' },
  { name: '用户资料', path: '/profile' },
  { name: '卡牌市场', path: '/market' },
  { name: '卡牌详情', path: '/detail' },
  { name: '商家主页', path: '/shop' },
  { name: '购物车', path: '/cart' },
  { name: '订单历史', path: '/orders' },
  { name: '下单页', path: '/order-create' },
]
</script>

<style scoped>
.main-nav {
  max-width: 600px;
  margin: 40px auto;
  padding: 32px 24px;
  border-radius: 12px;
  background: #f8f9fa;
}
.nav-btn {
  margin: 12px 0;
  font-size: 1.1em;
}
</style> 